<template>
  <div>
    {{ msg }}
  </div>
  <button @click="msg += '=='">更新数据</button>
  <Child :msg="msg" :msg2="msg2" />
  <!-- :[attribute] 使用属性 -->
</template>

<script>
// 它给我传递什么数据(需要改变的地方),我给它传递什么数据(需要获取的地方)
import Child from "./components/Child.vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "App",
  setup() {
    // 想要使用双向绑定必须(数据的响应式)使用 ref(基本数据类型,是通过getter,setter来实现数据的劫持) 或者reactive(对象)
    //ref也可以使用响应式对象,需要通过value属性来获取,value也是通过proxy代理对象生成的 ,代理是递归代理的

    // 本质上使用代理类 给目标对象生成代理对象,然后通过Reflect的静态方法返回.当改变代理对象时目标对象也会去发送变化
    const msg = ref("haha");
    const msg2 = ref("msg2");
    
    return { msg, msg2 };
  },
  components: {
    Child,
  },
  methods: {
    updata() {
      console.log(this);
    },
  },



// 声明周期函数 -->vue2 和 vue3的区别

//1.vue2.x -> [beforeCreate() ,created()] ,beforeMount() ,mounted()  ,beforeUpdate() ,update()
// ,[beforDestory()->beforeUnMount  ,destroyed()->UNmounted] 在vue3中改名了所以使用不了


//2.在vue3.x中 声明周期改变成了响应的组合api beforeCreate() ,created()-->使用setup() 代替了


//3.  hook函数的使用,作用是封装函数

});
</script>

<style lang="scss" scoped>
</style>